<template>
	<view class="new_order">
		<swiper class="swiper" v-if="orderArr.length" :disable-touch="true" :circular="true" :vertical="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in orderArr" :key="index" @touchmove.stop='stopTouchMove'>
				<view class="content">
					<image class="order_avatar" :src="item.member_image" mode=""></image>
					<text>最新订单来自{{item.member_name}}，{{item.add_time}}</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		name: "new-order",
		data() {
			return {
				isRotation: false,
				timerRotation: null,
				time:10 ,// 10秒轮训一次
				orderArr:[],//下单
			};
		},
		mounted() {
			this.onStartRotation()
		},
		destroyed() {
			this.isRotation = false
			clearInterval(this.timerRotation)
			this.timerRotation = null
		},
		methods: {
			stopTouchMove(){
				return true
			},
			onStartRotation() {
				if(this.isRotation) return
				this.timerRotation = setInterval(()=>{
					this.getGoodorder()
				},this.time * 1000)
			},
			getGoodorder(){
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "home.index.goodorder10s"
					},
					success: (res)=> {
						this.orderArr = res.data.data
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.new_order {
		position: fixed;
		left: 0;
		right: 0;
		top: 200upx;
		
		.swiper{
			width: 100%;
			height: 80upx;
		}
		
		.content{
			width: fit-content;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 0 40upx 40upx 0;
			padding: 0 20upx;
			display: flex;
			align-items: center;
			color: #FFFFFF;
			font-size: 24upx;
			
		}

		.order_avatar {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			margin-right: 10upx;
		}
	}
</style>
